<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<script type="text/javascript">
	function change() {
		var pic = document.getElementById("picture");
		var i = Math.random();//目的是使页面不一样
		pic.src = "number.jsp?id=" + i;
	}
	function mmyz(){
		var x=$("#pass1").val();
		var y=$("#pass2").val();
		if(x != y){
			alert("两次密码输入不一致");
			return false;
		}
	}
	setTimeout(function(){
		document.getElementById("error").style.display="none";
	},3000);
	setTimeout(function(){
		document.getElementById("error1").style.display="none";
	},3000);
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人注册</title>
<style>
		.t1{
				border:0px #CCCccc solid;
				width:100%;
				height:200px;
				box-shadow:0px 0px 8px gray;
				float:left;
				border-radius:2px;
			}
		.t2{
				
				font-weight:bolder；
				font-family:"华文行楷";
				font-style:italic;
				background-color:white;
				height:50px;
				width:20%;
				margin-left:0px;
				margin-top:30px;
				float:left;
			}
		.t3{
				width:20%;
				height:280px;
				float:left;
				margin-left:80px;
				
			}
		.t4{
				width:48%;
				height:440px;
				float:left;
				border:none;
			}
		.t5{
				width:70%;
				height:50px;
				line-height:50px;
				padding-left:10px;
				margin-top:50px;
				padding-top:0px;
				margin-left:80px;
				border:1px solid #cccccc;
				border-radius:3px;
			}
			
		.t6,.t66{
				height:90%;
				border:none;
				margin-left:10px;
				font-size:14px;
				outline:none;
			}
		.t66{
				width:72%;
			}
		.t6{
				width:45%;
			}
		.t7{
				background-color:#0000FF;
				font-size:20px;
				width:100%;
				height:35px;
				color:white;
				margin:-5px auto;
				margin-left:-40px;
				border:none;
			}
		.t8{
				width:52%;
				height:40px;
				margin:0px auto;
				margin-top:40px;
				font-weight:bolder;
				margin-left:120px;
				border:hidden;
				border-radius:3px;
			}
		.t9{
				width:100%;
				heiht:150px;
				margin:0px auto;
				padding-left:10px;
				margin-top:40px;
			}
		.t10{
				float:right;
				width:15%;
				bacnground-color:black;
				color:black;
				margin-top:160px;
		}
		.t11{
				font-size:14px;
				color:gray;
		}
		.t12{
				width:68%;
				height:20px;
				float:left;
				margin-top:30px;
				margin-left:150px;
				text-decoration: none;
				margin-bottom:40px;
				font-size:14px;
		}
			
		.t13{
				width:100%;
				height:800px;
				box-shadow:0px 0px 3px gray;
				border-bottom:1px solid #cccccc;
			}
		.t14{
				width:98px;;
				height:32px;
				float:right;
				font-size: 12px;
				color:red;

		}
		.t15{
				float:right;
				width:50%;
				height:70%;
				border-left:1px solid #cccccc;
				margin-top:5px;
		}
		a{
		color:gray; text-decoration: none;
		}
		.l1{
			float:left;
			text-align:center;
			border:0px solid #cccccc;
			margin-top:70px;
			margin-left:170px;
			text-align:center;
		}
		.l2{
			float:left;
			text-align:center;
			border-top:1px solid #cccccc;
			margin-top:150px;
			margin-left:-130px;
			padding-top:30px;
		}
		.t12{
			font-size: 12px;
			color:red;
		}
		.t16{
				font-size:16px;
				color:#111111;
		}
		.qq{
				font-size:12px;
				color:red;
				
		}
			.xx{
				width:20%;
				height:50px;
				margin-top:-38px;
				margin-left:400px;
				border:0px solid #cccccc;
				border-radius:3px;
				font-size: 12px;
				color:red;
			}
	</style>
	<link href="tp/favico.ico" rel="shortcut icon" />
</head>
<body>
	<div class="t1">
		<div class="t3">
			<img src="image/tp/1.png">
		</div>
		<div class="t2">
			<h1 style="margin:0px auto;">欢迎注册</h1>
		</div>
		<div class="t10">
		<label>
				<a href="login.jsp">已有账号？登录</a>
		</label>
		</div>
	</div>
	<div class="t13">
		<div class="t4">
			<form action="RegisterServlet" method="post" onsubmit="return mmyz()">
				<div class="t5">
					<span class="t11">用&nbsp户&nbsp名</span>
					<input name="user" value="${param.user }" class="t66" placeholder="您的账户名至少使用两种字符"  pattern="^^[a-zA-Z0-9]{6,18}$" required oninvalid="setCustomValidity('请输入正确的用户名');" oninput="setCustomValidity('');">
				</div><div class="xx" id="error1">${error1}</div>
				<div class="t5">
					<span class="t11">设置密码</span>
					<input type="password" name="password" id="pass1" class="t66" placeholder="建议至少使用两种字符组合" pattern="^[a-zA-Z0-9]{6,18}$" required oninvalid="setCustomValidity('请输入正确的密码');" oninput="setCustomValidity('');">
				</div>
				<div class="t5">
					<span class="t11">确定密码</span>
					<input type="password" name="password1" id="pass2" class="t66" placeholder="请再次输入密码" pattern="^[a-zA-Z0-9]{6,18}$" required oninvalid="setCustomValidity('请输入正确的密码');" oninput="setCustomValidity('');">
				</div>
				
				<div class="t5">
					<span class="t11">手机号码</span>
					<input  name="phone" value="${param.phone}" class="t66" placeholder="建议使用常用手机" pattern="^1[3|5|7|8][0-9]{9}$" required oninvalid="setCustomValidity('请输入正确的电话');" oninput="setCustomValidity('');">
				</div>
				
				<div class="t5">
					<span class="t11">验证码       </span>  
					<input name="cooder" class="t6" placeholder="请输入验证码">
					<div class="t14">
						<img src="Coder" width="98" height="50" id="picture"
					 	onclick="this.src='Coder?x=' + Math.random();"style="cursor: pointer;">
					 	<span class="qq" id="error">${error}</span> 
					 </div>
				</div>
				<div class="t8">
					<input type="submit" class="t7" value="立即注册">
			
				 </div>
				
			</form>
		</div>
		<div class="t15">
			<div class="l1"><img src="image/aa.png"><a href="https://reg.jd.com/reg/company">企业用户注册</a></div>
			
			<div class="l2"><img src="image/bb.png"><a href="https://reg.joybuy.com/reg/person.html">INTERNATIONALCUSTOMERS</a></div>
		</div>
   </div>
		<div class="t12" >
					<a href="" >关于我们 | </a>
					<a href="" >联系我们 | </a>
					<a href="" >商家入驻 | </a>
					<a href="" style="color:gray; text-decoration: none;">广告服务 | </a>
					<a href="" style="color:gray; text-decoration: none;">手机熊猫 | </a>
					<a href="" style="color:gray; text-decoration: none;">销售联盟 | </a>
					<a href="" style="color:gray; text-decoration: none;">友情链接 | </a>
					<a href="" style="color:gray; text-decoration: none;">手机公益 | </a>
					<a href="" style="color:gray; text-decoration: none;">友情链接 | </a>
					<a href="" style="color:gray; text-decoration: none;">English Site |</a>		
		</div>
</body>
</html>
